<template>
 <div>
     <div class="item" v-for="(item , idx ) in  list" :key="idx">
         <div class="item-title">
             <span class="item-title-icon">{{item.title}}</span>
             <div v-if="item.children" class="item-children">
                 <detail-list :list="item.children">

                 </detail-list>
            </div>
         </div>
     </div>
 </div>
</template>

<script>
 export default {
     name:'DetailList',
    props:{
        list:Array
    },
   data () {
     return {

     }
   },
   components: {

   }
 }
</script>

<style>
.item{
    z-index: 2;
}
    .item-title-icon{
        display: inline-block;
        background: url(https://cdn.liaoxuefeng.com/cdn/files/attachments/001477919415261ebc91072244149e0ab69f60ae2abe39f000/l) 0 -.45rem no-repeat;
        margin-right: 10px;
    }
    .item-title{
        line-height: 55px

    }

    .item-children{
        padding: 0 10PX;

    }
</style>
